@extends('mobile.static_pages.template.bootstrap')
@section('title', '书籍详情')
@section('scripts')
<link rel="stylesheet" href="{{ asset('css/mobile-book.css') }}" />
@endsection
@section('content')

<section class="title">
	<div class="book-title">
		<img class="book-thumbnail" src="{{ asset('imgs/thumbnail.jpeg') }}">
		<div class="info">
			<h4 class="title">独宠新妻：蜜宠一生一世</h4>
			<p>
				作家：江源 <br>
				连载（共286章）
			</p>
		</div>
		<span class="fa fa-heart-o fa-lg"></span>
	</div>
	<div class="btn-container">
		<div class="row">
			<div class="col-xs-5">
				<a href="#" class="btn btn-default btn-block">
					<span class="fa fa-book"></span>
					免费试读
				</a>
			</div>
			<div class="col-xs-7" style="padding-left: 10px;">
				<a href="#" class="btn btn-danger btn-block">
					<span class="fa fa-arrow-down"></span>
					离线下载
				</a>
			</div>
		</div>
	</div>
	<div class="flag-container dotdotdot-nowrap">
		<span class="label label-success">最新</span>
		第一卷：手可摘星辰_第242章 你啊谁来发生的氛围让
	</div>
</section>
<section class="info">
	<div class="info-container">
		<ul class="nav nav-pills nav-title">
			<li class="active">
				<a href="#abstract" data-toggle="tab">简介</a>
			</li>
			<li>
				<a href="#catalog" data-toggle="tab">目录</a>
			</li>
		</ul>
		<div class="tab-content">
			<div class="tab-pane fade in active" id="abstract">
				【我是简介】 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique provident vero distinctio libero expedita laboriosam. Error ullam ut provident optio hic exercitationem, cumque quos in labore consequuntur, sed, recusandae doloremque.
			</div>
			<div class="tab-pane fade" id="catalog">
				【我是目录】 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae tenetur dolores odit error, pariatur nesciunt repellendus ducimus a accusantium atque ullam iure impedit illo beatae facilis, consectetur quia modi! Recusandae.
			</div>
		</div>
	</div>
</section>
<section class="more">
	<div class="title">
		<div class="row">
			<div class="col-xs-8">
				书籍推荐
			</div>
			<div class="col-xs-4 text-right">
				<a href="#">换一换</a>
			</div>
		</div>
	</div>
	<div class="books">
		@for($i=0; $i<3; $i++)
		<div class="book">
			<div class="media">
				<div class="media-left">
					<img class="book-thumbnail" class="media-object" src="{{asset('imgs/thumbnail.jpeg')}}" />
				</div>
				<div class="media-body">
					<div class="media-heading">
						<div class="title">
							<h4 class="">军火之王</h4>
							<div class="text-muted">观星梦青冥</div>
						</div>
						<div class="link">
							<a class="btn btn-sm btn-default" href="#">立即阅读</a>
						</div>
					</div>
					<div class="content text-muted">
						曾经叱咤风云的佣兵王者，变成小小的军火贩子，家族、部落、国家、铁血柔情、
						腥风血雨，且看他如何一步步成为让各国忌惮的国际军火商。
					</div>
				</div>
			</div>
		</div>
		@endfor
	</div>
</section>
<section class="search">
	<form>
		<div class="form-group">
			<div class="input-group">
				<input class="form-control" type="text" placeholder="作者名/书名">
				<div class="input-group-addon">
					<a href="#"><span class="fa fa-fw fa-search"></span></a>
				</div>
			</div>
		</div>
	</form>
</section>
@endsection